body{
  background: black;
}
.quiz{
  position: relative;
  background: url(../img/bac-top.png);
  background-size: 100%;
  padding-bottom: 0.3rem;
  background-repeat: no-repeat,repeat;
  overflow: hidden;
  color:white;
  font-weight: 100;
  .mask{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
  }
  .alert{
    position: fixed;
    top:50%;
    left: 50%;
    transform: translate(-51%,-50%);
    width: 6.34rem;
    height: 5.4rem;
    background: #E9573F;
    border: 0.1rem solid black;
    .close{
      display: inline-block;
      position: absolute;
      top: -0.4rem;
      right: -0.4rem;
      text-align: center;
      background: white;
      color: black;
      font-weight: 300;
      transform:rotate(45deg);
      width: 0.81rem;
      height: 0.81rem;
      line-height: 0.61rem;
      border: 0.05rem solid black;
      border-radius: 50% 50%;
    }
    ul{
      margin-top: 0.2rem;
      color: black;
      li:nth-child(1){
        text-align: center;
        font-size:0.48rem;
        span{
          margin: 0 0.15rem;
        }
      }
      li:nth-child(2){
        color: white;
        text-align: center;
        font-size: 0.3rem;
      }
      li:nth-child(3){
        display: flex;
        flex-direction: row;
        justify-content: center;
        font-size: 0.42rem;
        margin-top: 0.2rem;
        span{
          display: flex;
          position: relative;
          flex-direction: column;
          justify-content: center;
          width: 1.2rem;
          height: 1.2rem;
          font-weight: 400;
          text-align: center;
          background: white;
          border: 0.05rem solid black;
          i{
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5)
          }
          b{
            font-size: 0.27rem;
          }
        }
        span:not(:first-child){
          margin-left: 0.1rem;
        }
      }
      li:nth-child(4){
        width: 88%;
        margin: 0.2rem auto;
        color: white;
        font-size: 0.3rem;
      }
    }
  }
  .category{
    margin: 0 auto;
    margin-top:4.23rem;
    width: 94%;
    font-size: 0.3rem;
    ul{
      display: flex;
      flex-direction: row;
      li{
        width: 1.79rem;
        height: 0.68rem;
        line-height: 0.68rem;
        text-align: center;
        background: #102E5B;
        border-radius: 0.1rem 0.1rem 0rem 0rem;
        a{
          color: white;
        }
      }
      li:nth-child(1){
        margin-left: 0.24rem;
      }
      li:nth-child(2){
        background: #102E5B;
      }
    }
  }
  .dynamic{
    margin: 0 auto;
    width: 94%;
    padding-bottom: 0.6rem;
    background: #2A508C;
    border-radius: 0.1rem;
    font-size: 0.24rem;
    overflow: hidden;
  }
  .quiz-game{
    margin: 0 auto;
    width: 94%;
    min-height: 9rem;;
    padding-bottom: 0.6rem;
    background: #2A508C;
    border-radius: 0.1rem;
    font-size: 0.24rem;
    overflow: hidden;
    ul{
      width: 94%;
      margin: 0 auto;
      li{
        margin-top: 0.3rem;
      }
      .quiz-time{
        display:block;
        margin: 0 auto;
        height:0.74rem;
        text-align: center;
        line-height: 0.74rem;
        background: #F2CC2C;
        border-radius: 0.1rem;
        span{
          margin-left: 0.1rem;
        }
      }
      .betting{
        margin: 0 auto;
        background: #102E5B;
        border-radius: 0.1rem;
        margin-top: 0.3rem;
        padding-bottom: 0.2rem;
        .bet-top{
          ul{
            display: flex;
            flex-direction: row;
            .cou-left,.cou-right{
              display: flex;
              position: relative;
              flex-direction: column;
              align-items: center;
              width: 2rem;
              .leftname{
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
                width: 0.75rem;
                height: 0.7rem;
                position: absolute;
                left:-0.25rem;
                top: 0.1rem;
              }
              .rightname{
                display: flex;
                text-align: center;
                justify-content: center;
                align-items: center;
                width: 0.75rem;
                height: 0.7rem;
                position: absolute;
                right:-0.25rem;
                top: 0.1rem;
              }
              span{
                margin-bottom: 0.07rem;
              }
              span:nth-child(1){
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                width:1.7rem;
                height: 0.9rem;
                b{
                  width:1rem;
                  text-align: center;
                }
                img{
                  width:0.9rem;
                  height:0.9rem;
                }
              }
              .bomm{
                position: relative;
                margin-top: 0.12rem;
                padding: 0.02rem 0rem;
                text-align: center;
                width: 1.63rem;
                background: #E85866;
                border-radius: 0.34rem;

              }
            }
            .cou-right{
              .bomm{
                background: #449FEA;
              }
            }
            .score{
              display: flex;
              flex-direction: column;
              align-items: center;
              width: 1.63rem;
              span:nth-child(1){
                font-size: 0.3rem;
                color: #E9573F;
              }
              span:nth-child(2){
                font-size: 0.4rem;

              }
              span:nth-child(3){
                position: relative;
                padding: 0.02rem 0rem;
                margin-top: 0.1rem;
                width: 100%;
                text-align: center;
                background: #6FC93A;
                border-radius: 0.34rem;
              }
            }
            li:nth-child(1){
              margin-left: 0.2rem;
            }
          }
        }
        .bet-bom{
          display: flex;
          flex-direction: row;
          justify-content: center;
          width: 6.28rem;
          height: 0.49rem;
          margin: 0.1rem auto 0rem;
          overflow: hidden;
          border-radius: 0.25rem;
          border: 0.03rem solid black;
          span{
            width: 35%;
            line-height: 0.49rem;
            text-align: center;
            background: #2B6F89;
          }
          span:nth-child(1){
          }
          span:nth-child(2){
            width: 20%;
            border-radius: 0 ;
            background: #383D3F;
          }
          span:nth-child(3){
            width: 45%;
          }
        }
        .record{
          a{
            color: #FFF;
          }
          text-align: center;
          font-size: 0.32rem;
          i{
            margin-left: 0.2rem;
          }
        }
      }
      .running{
        display: inline-block;
        margin-top: 0.5rem;
        color: #6FC93A !important;
        align-items: center;
      }
      .Waiting{
        background: rgba($color: white, $alpha: 0.6);
        .cou-left{
          .bomm{
            margin-top: 0rem !important;
          }
          span:nth-child(2){
            margin-top: 0.1rem;
            width: 1.63rem;
            height: 0.82rem;
            background: url(../img/icon-talk.png);
            background-size: 100%;
            text-align: center;
            img{
              width: 0.84rem;
              height: 0.44rem;
              margin: 0.25rem auto;
            }
          }
        }
        .cou-right{
          .bomm{
            margin-top: 0rem !important;
          }
          span:nth-child(2){
            margin-top: 0.1rem;
            width: 1.63rem;
            height: 0.82rem;
            background: url(../img/icon-talk.png);
            background-size: 100%;
            text-align: center;
            img{
              width: 0.84rem;
              height: 0.44rem;
              margin: 0.25rem auto;
            }
          }
        }
        .wai-time{
          display: flex;
          flex-direction: column;
          margin-left: 0.1rem;
          align-items: center;
          width: 1.63rem;
          span:nth-child(1){
            display: inline-block;
            width: 1.6rem;
            font-size: 0.48rem ;
            color: white ;
          }
          span:nth-child(2){
            font-size: 0.24rem ;
          }
          span:nth-child(3){
            width: 1.63rem;
            height: 0.82rem;
            margin-top: 0.05rem;
            background: url(../img/icon-talk.png);
            background-size: 100%;
            text-align: center;
            img{
              width: 0.84rem;
              height: 0.44rem;
              margin: 0.26rem auto;
            }
          }
          .bomm{
            padding: 0.02rem 0rem;
            text-align: center;
            width: 100%;
            margin-top: 0.1rem;
            background: #6FC93A;
            border-radius: 0.34rem;
          }
        }
        .bet-bom{
          span:nth-child(1){
            background:#E85866;
          }
          span:nth-child(2){
            background:#6FC93A;
          }
          span:nth-child(3){
            background:#449FEA;
          }
        }
        .record{
          font-weight: 400;
          color: black;
        }
      }
      .ditStart{
        background: rgba($color: white, $alpha: 0.6);
        margin:0 auto;
        border-radius: 0.1rem;
        margin-top: 0.2rem;
        padding-bottom: 0.3rem;
        ul{
          display: flex;
          width: 100%;
          flex-direction: row;
          li{
            display: flex;
            flex-direction: row;
            align-items: center;
          }
          li:nth-child(1){
            span{
              margin-left: 0.1rem;
            }
            span:nth-child(2){
              width: 0.91rem;
              height: 0.91rem;
              font-size: 0.5rem;
              line-height: 0.91rem;
              text-align: center;
              background: #4c5052;
              border-radius: 0.1rem;
            }
          }
          li:nth-child(2){
            display: flex;
            flex-direction: column;
            margin-left: 0.65rem;
            margin-right: 0.6rem;
            align-items: center;
            width: 1.63rem;
            span:nth-child(1){
              display: inline-block;
              width: 1.6rem;
              font-size: 0.48rem ;
              color: white ;
            }
            span:nth-child(2){
              font-size: 0.24rem ;
            }
          }
          li:nth-child(3){
            span:nth-child(1){
              width: 0.91rem;
              height: 0.91rem;
              font-size: 0.5rem;
              line-height: 0.91rem;
              text-align: center;
              background: #4c5052;
              border-radius: 0.1rem;
              margin-right: 0.1rem;
            }
          }
        }
      }
    }
  }
  .quiz-dynamic{
    @extend .quiz-game
  }
  .quiz-team{
    width: 94%;
    margin: 0 auto;
    border-radius: 0.1rem;
    background: #2A508C;
    padding-bottom: 0.4rem;
    overflow: hidden;
    ul{
      margin-top: 0.3rem;
      li{
        display: flex;
        position: relative;
        flex-direction: row;
        align-items: center;
        width:94%;
        height: 1.36rem;
        margin:  0.2rem auto 0;
        background: #102E5B;
        border-radius: 0.1rem;
        .team-img{
          display:flex;
          margin-left: 0.25rem;
          width: 0.9rem;
          height: 0.9rem;
          img{ width:100%;height:100%;}
        }
        .team-detail{
          display: flex;
          flex-direction: column;
          margin-left: 0.2rem;
          span:nth-child(1){
            font-size: 0.3rem;
            b{
              font-size: 0.24rem;
              font-weight: 100;
            }
          }
          span:nth-child(2){
            font-size: 0.24rem;
            b{
              font-weight:100;
            }
            b:nth-child(2){
              display: inline-block;
              width: 1.31rem;
              background: #E85866;
              border-radius: 0.2rem;
              text-align: center;
              margin-left: 0.2rem;
            }
          }
        }
        .team-quiz{
          display: flex;
          position: absolute;
          right: 0.2rem;
          align-items: center;
          justify-content: center;
          width: 1.46rem;
          height: 0.74rem;
          background: white;
          border-radius: 0.1rem;
          img{
            width: 100%;
            height:100%;
          }
        }
      }
    }
  }
}
.active{
  background: #2A508C !important;
}
